<template>
    <div class="content">
        <el-tree 
          :data="layerNames" 
          :props="defaultProps" 
          show-checkbox
          @check-change="handleCheckChange"
          @node-click="handleNodeClick" ></el-tree>


    </div>
    
</template>
    
    
<script>
import { layerNames } from "../../data/layerNames";




    export default {
    
        components: {
        },
        data() {
            return {
                layerNames:layerNames,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        mounted(){
        
        },
        computed: {
    
        },
    
        methods: {
            handleNodeClick(data) {
             console.log(data);
            },
            handleCheckChange(data, checked, indeterminate) {
            }
    
        },
     };
    </script>
    
    
<style lang="less" scoped>
.content{
    width: 1000px;
    height: 500px;
    background: rgb(115, 191, 194);
}


/** */
.el-tree{
    width: 180px;
    background: rgba(1,18,26,0.4);
    border-radius: 6px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(69, 174, 235, 0), rgba(96, 200, 251, 1)) 1 1;
    backdrop-filter: blur(1px);
    color:#fff;
}


::v-deep .el-tree-node__content{&:hover{background-color: rgba(80, 65, 168, 0.87);}
}
::v-deep .el-tree-node.is-current > .el-tree-node__content {background-color: rgb(20, 207, 20) !important;}


</style>
    
    
    
    
    
    
    